<html>
<head>
<title>Recipe Search</title>
<meta>

<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-table.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/recipes.css">
<link rel="stylesheet" href="css/index.css">

<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.js"></script>
<script src="js/bootstrap-table-export.js"></script>
<script src="js/tableExport.js"></script>
<script src="js/bootstrap-table-editable.js"></script>
<script src="js/bootstrap-editable.js"></script>


<script type="text/javascript">

    // format fields here
    // alternatively, use a data-formatter in the <table><th><tr data-formatter="fieldFormat">...
    function responseHandler(res) {
        $.each(res.rows, function (i, row) {

            // description
            var description = "<a href=\"" + row.source_url + "\">" + row.title + "</a>";
            description += "<br/><em>By: </em><a href=\"" + row.author.url + "\">" + row.author.name + "</a>";
            description += "<br/><br/>\"" + row.description + "\"";
            description += "<br/><br/><em>Minimum Prep Time: </em>" + (row.prep_time_min === undefined ? " -" : row.prep_time_min);
            description += "<br/><em>Minimim Cook Time: </em>" + (row.cook_time_min === undefined ? " -" : row.cook_time_min);
            description += "<br/><em>Servings: </em>" + row.servings;
            description += "<br/><em>Tags: </em>" + row.tags;
            description += "<br/>";
            row.description = description;

            // ingredients
            var ingredients = "<ul>";
            for (var item in row.ingredients) {
                ingredients += "<li>" + row.ingredients[item] + "</li>";
            }
            ingredients += "</ul>"
            row.ingredients = ingredients;

            // directions
            var directions = "<ul>";
            for (var item in row.ingredients) {
                if (row.directions[item] === undefined) continue;
                directions += "<li>" + row.directions[item] + "</li>";
            }
            directions += "</ul>"
            row.directions = directions;

        });
        return res;
    }


    function getHeight() {
        var height = $(window).height() - $('h1').outerHeight(true);
        console.log("getHeight() : " + height);
        return height;
    }


    function initRecipeTable() {
        console.log("initTable");

        var $table = $('#table')
            $remove = $('#remove');

        $table.bootstrapTable({
            height:             getHeight(),
            striped:            "true",
            toolbar:            "#toolbar",
            showColumns:        "true",
            showRefresh:        "true",
            showToggle:         "true",
            showExport:         "true",
            showPaginationSwitch: "true",
            pagination:         "true",
            sidePagination:     "server",
            pageList:           "[1, 2, 4, 8, ALL]",
            locale:             "en_US",
            url:                "search",
            search:             "true",
            searchText:         "*",
            searchOnEnterKey:   "true",
            method:             "post",
            contentType:        "application/json",
            dataType:           "json",
            cache:              "false",
            responseHandler:    "responseHandler",
            pageNumber:         "1",
            pageSize:           "4"
        });

        $(window).resize(function () {
            $table.bootstrapTable('resetView', {
                height: getHeight()
            });
        });

    }
</script>

</meta>
</head>

<body onLoad="initRecipeTable()">

    <div class="container">
        <h1>Elastic Recipe Search</h1>
        <div id="toolbar">
            <!-- <button id="remove" class="btn btn-danger" disabled>
                <i class="glyphicon glyphicon-remove"></i> Delete
            </button> -->
        </div>
        <table id="table">
            <thead>
            <tr>
                <th class="col-sm-3" data-field="description">Description</th>
                <th class="col-sm-2" data-field="ingredients">Ingredients</th>
                <th class="col-sm-3" data-field="directions">Directions</th>
            </tr>
            </thead>
        </table>
    <div>

</body>

</html>